<cpanel setvar="headerimg=../../images/mailmenu.gif">
<cpanel setvar="dprefix=../../">
<cpanel Branding="include(stdheader.html)">
<?cptt _ajaxapp_header.tmpl ?>
<style type="text/css">
<?cp Branding::spritelist(.spriteicon_img_mini {float:left;margin-right:5px;background: url\{leftparenthesis}"%"\{rightparenthesis};} %,@spriteurl,images::#icon-${img}_mini {background-position\{colon}0 -${cssposition}px;width\{colon}${width}px;height\{colon}${height}px; }:) imgtype=icon,subtype=img,method=scale_60percent,format=png,img=dfiltering ?>

#filter_container {
   border: 1px solid #dadada;
}

.filter {
   cursor:move;
   border-bottom: 1px solid #dadada;
   padding: 5px;
   text-align: center;
   background-color: #fff;
   background: url(../../images/row-bg.png) top left repeat-x;
   zoom: 1;
}
#ygddfdiv .filter {
    background: url(../../images/active-bg.png) bottom left repeat-x;
}

ul.move {
    list-style: none;
    margin:0px;
    padding:0px;
}

ul.move li.up {
    background: transparent url(../../images/uparrow1.png) top left no-repeat;
    width: 7px;
    height: 9px;
    padding-bottom: 3px;
    margin-bottom: 3px;
    border-width: 0 0 1px 0;
    border-bottom: 1px dotted #999;
    -webkit-padding-start: 0px !important;
    padding-top:0px !important;
    margin-top:0px !important;
}
ul.move li.up:hover {
    background: url(../../images/uparrow2.png) top left no-repeat;
    }
ul.move li.down {
    background: transparent url(../../images/down-arrow1.png) top left no-repeat;
    width: 7px;
    height: 9px;
}
ul.move li.down:hover {
    background: url(../../images/down-arrow2.png) top left no-repeat;
    width:7px;
    height:9px;
}

ul, menu, dir {
    -webkit-padding-start: 0px !important;
}

ul.move li a {
    display: block;
    width: 7px;
    height: 9px;
    text-indent: -9999px;
}
.arrows {
    float:left;
    width:10px;
}
.arrows2 {
    float:right;
    width:10px;
}
.filter-title {
    float:left;
    padding-left:10px;
    text-align:left;
    font-size:13px;
    color:#666;
    text-shadow: 0 1px 0 #fff;
    padding-top:3px;
}
.actions {
    float:right;
    width:100px;
    padding-top:3px;
}
.actions a {
    color:#04586C;
    text-decoration: underline;
    font-weight: bold;
    padding-left:5px;
    display:inline-block;
}
.actions a.delete {
    color:#C43234;
}
.clear {
    height: 0;  /* IE */
    clear:both;
}
</style>

<div class="body-content">
<cpanelfeature cgpro_filters>
<div class="h1Title"><div class="spriteicon_img_mini" id="icon-dfiltering_mini"></div><cpanel langprint="UFEditFs"> <?cp Email::accountname(%,account) display=1,account=$FORM{'account'} ?></div>
    
<p><cpanel langprint="UFEditFs-desc"></p>
   
<h2><cpanel langprint="CreateFilter"></h2>
<a href="editfilter.html?account=<cpanel formprint="$FORM{'account'}">&filtername=" class="create-button"><cpanel langprint="filters_create_filter"></a>

<br />
<br />
   
<?cp StatsBar::stat( [p class="caution"]$LANG{'statsattention'}&nbsp;%&nbsp;$LANG{'statsoutof'}&nbsp;&nbsp;%[/p],count,max) display=emailfilters,warnings=1,warninglevel=80,infinitylang=true ?><br />
<h2><cpanel langprint="EFCurrentFilters"></h2>

<div id="filter_container">
<?cp Email::filterlist(
[div class="filter_wrapper"]
[div class="filter" id="%-filter" title="$LANG{'Drag to reorder.'}"]
[div class="arrows"]
[ul class="move"]
    [li class="up"][a href="#" onclick="move_up(this); return false"][/a][/li]
    [li class="down"][a href="#" onclick="move_down(this); return false"][/a][/li]
[/ul]
[/div]
[div class="filter-title"]%[/div]
[div class="actions"]
[a href="editfilter.html?account=$FORM{'account'}&filtername=%"]$LANG{'Edit'}[/a]
[a href="delfilter.html?account=$FORM{'account'}&filtername=%"]$LANG{'Delete'}[/a]
[/div]
[div class="arrows2"]
[ul class="move"]
    [li class="up"][a href="#" onclick="move_up(this); return false"][/a][/li]
    [li class="down"][a href="#" onclick="move_down(this); return false"][/a][/li]
[/ul]
[/div]
[div class="clear"][/div]
[/div]
[/div]
,filtername,filtername,^filtername,^filtername) account=$FORM{'account'} || "No filters created for this account." ?>
</div>


<cpanelif  $FORM{'account'} >
    <div class="return-link"><a href="managefilters.html">&larr; <cptext "Go Back"></a></div>
</cpanelif>
<cpanelif  !$FORM{'account'} >
    <div class="return-link"><a href="../../index.html">&larr; <cptext "Go Back"></a></div>
</cpanelif>

<?cptt _ajaxapp_footer.tmpl ?>
<script>
var dditem = function() {
    dditem.superclass.constructor.apply(this,arguments);
};

var MAILBOX = <cpanel jsprint="$FORM{'account'}">;

function get_order() {
    var filter_els = DOM.getElementsByClassName( "filter", "div", "filter_container" );
    return filter_els.map( function(el) {
        return el.id.replace(/-filter$/,"");
    } );
}

var saved_notice = null;
function save_order() {
    var api_vars = { mailbox: MAILBOX };
    var filter_els = DOM.getElementsByClassName( "filter", "div", "filter_container" );
    filter_els.forEach( function(el,idx) {
        var filter_name = el.id.replace(/-filter$/,"");
        api_vars["filter"+idx] = filter_name;
    } );

    if (saved_notice && !DOM.inDocument(saved_notice.element)) {
        saved_notice = null;
    }
    var success = function() {
        old_order_joined = get_order().join();
        saved_notice = new CPANEL.ajax.Dynamic_Notice( {
            level: "success",
            content: "<cptext "Filter order saved.">",
            replaces: saved_notice
        } );
        YAHOO.util.DragDropMgr.unlock();
    };

    YAHOO.util.DragDropMgr.lock();

    CPANEL.api( {
        module:   "Email",
        func:     "reorderfilters",
        data:     api_vars,
        callback: CPANEL.ajax.build_callback( success, null, {
            on_error: function() { YAHOO.util.DragDropMgr.unlock() }
        } )
    } );
}

var old_order_joined = get_order().join();
function order_changed() {
    var new_order_joined = get_order().join();
    return new_order_joined !== old_order_joined;
}

YAHOO.extend( dditem, CPANEL.dragdrop.DDItem, {
    endDrag: function() {
        CPANEL.dragdrop.DDItem.prototype.endDrag.apply(this,arguments);
        if ( order_changed() ) {
            save_order();
        }
    }
} );

var containers = CPANEL.dragdrop.containers( "filter_container", undefined, {
    item_constructor: dditem
} );

var save_timeout = null;
function queue_save() {
    clearTimeout(save_timeout);
    save_timeout = setTimeout( save_order, 500 );
}

function move_up(link) {
    var wrapper = DOM.getAncestorByClassName(link,"filter_wrapper");
    var previous_wrapper = DOM.getPreviousSibling(wrapper);
    if (previous_wrapper) {
        wrapper.parentNode.insertBefore(wrapper,previous_wrapper);
        link.focus();
        queue_save();
    }
}
function move_down(link) {
    var wrapper = DOM.getAncestorByClassName(link,"filter_wrapper");
    var next_wrapper = DOM.getNextSibling(wrapper);
    if (next_wrapper) {
        var next_next = DOM.getNextSibling(next_wrapper);
        if (next_next) {
            wrapper.parentNode.insertBefore(wrapper,next_next);
        }
        else {
            wrapper.parentNode.appendChild(wrapper);
        }

        link.focus();
        queue_save();
    }
}
</script>
</cpanelfeature>
</div>
<cpanel Branding="include(stdfooter.html)">
